<template>
	<div class="heads margin-left-right">
		<div class="icon-left-option">
			<img class="icon" src="@/assets/pc/logo.png" />
			<div class="icon-txt">电商客服</div>
			<div class="icon-txt-two">Ai</div>
		</div>

		<el-dropdown v-if="userInfo.userId" @command="logOutClick">
			<span class="el-dropdown-link">
				{{ userInfo.nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="a">退出登陆</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<div class="icon-right-option" v-else @click="loginClick">
			登陆
		</div>
	</div>
</template>
<script>
export default {
	name: 'Head',
	data() {
		return {
			userInfo: {},
		}
	},
	mounted() {
		this.initUserInfo()
	},
	methods: {
		logOutClick() {
			console.log("logOutClick===")
			this.$confirm('此操作会退出登陆,是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.logOutFn()
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				});
			});
		},
		/**
		 * 退出登陆
		 */
		logOutFn() {
			// revoked	
			this.$http({
				url: this.$http.adornUrl(`/auth/logout`),
				method: 'delete',
			}).then(({ data }) => {
				if (data.code == 200) {
					//获取用户信息
					console.log('data-user--', data)
					localStorage.clear();
					this.$router.push({
						path: '/login'
					})
					location.reload();
				} else {
					this.$message({
						message: data.msg,
						center: true,
						type: "success"
					})
				}
			})
		},
		initUserInfo() {
			console.log('1=initUserInfo==')
			//如果有用户信息则已经是登陆状态
			let userInfoStr = localStorage.getItem('userInfo')
			if (userInfoStr) {
				this.userInfo = JSON.parse(userInfoStr)
			}
		},
		loginClick() {
			this.$router.push({
				path: 'login'
			})
		}
	}
}
</script>
<style scoped="scoped" lang="scss">
.heads {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
}

.icon-left-option {
	display: flex;
	align-items: center;

	.icon {
		width: 60px;
		height: 54px;
	}

	display: flex;
	align-items: center;

	.icon-txt {
		margin-left: 18px;
		font-size: 25px;
		font-weight: 700;
	}

	.icon-txt-two {
		margin-left: 6px;
		width: 45px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		border-top-left-radius: 7px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		background: #C9E8FF;
		font-size: 16px;
		font-weight: 700;
		color: rgba(37, 158, 250, 1);
	}
}

.icon-right-option {
	cursor: pointer;
	width: 135px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background: #0E8BEB;
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
}

.margin-left-right {
	padding-left: 8.5vw;
	padding-right: 8.5vw;
}

@media screen and (max-width: 991px) {

	/* 样式规则 */
	.margin-left-right {
		padding-left: 0.3vw;
		padding-right: 0.3vw;
	}

	.icon-right-option {
		width: 115px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		background: #0E8BEB;
		font-size: 13px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.icon-left-option {
		display: flex;
		align-items: center;

		.icon {
			width: 60px;
			height: 54px;
		}

		display: flex;
		align-items: center;

		.icon-txt {
			margin-left: 18px;
			font-size: 25px;
			font-weight: 700;
		}

		.icon-txt-two {
			margin-left: 6px;
			width: 45px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			border-top-left-radius: 7px;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			background: #C9E8FF;
			font-size: 16px;
			font-weight: 700;
			color: rgba(37, 158, 250, 1);
		}
	}

}

@media screen and (max-width: 767px) {

	/* 样式规则 */
	.margin-left-right {
		padding-left: 0.1vw;
		padding-right: 0.1vw;

	}

	.icon-right-option {
		width: 95px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background: #0E8BEB;
		font-size: 12px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.icon-left-option {
		display: flex;
		align-items: center;

		.icon {
			width: 50px;
			height: 44px;
		}

		display: flex;
		align-items: center;

		.icon-txt {
			margin-left: 24px;
			font-size: 18px;
			font-weight: 700;
		}

		.icon-txt-two {
			margin-left: 8px;
			width: 44px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			border-top-left-radius: 7px;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			background: #C9E8FF;
			font-size: 14px;
			font-weight: 700;
			color: rgba(37, 158, 250, 1);
		}
	}

}

@media screen and (max-width: 480px) {
	.icon-right-option {
		width: 75px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		background: #0E8BEB;
		font-size: 10px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.icon-left-option {
		display: flex;
		align-items: center;

		.icon {
			width: 36px;
			height: 36px;
		}

		display: flex;
		align-items: center;

		.icon-txt {
			margin-left: 24px;
			font-size: 16px;
			font-weight: 700;
		}

		.icon-txt-two {
			margin-left: 8px;
			width: 39px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-top-left-radius: 7px;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			background: #C9E8FF;
			font-size: 14px;
			font-weight: 700;
			color: rgba(37, 158, 250, 1);
		}
	}

}
</style>
